/* 
  1 发送请求 接收数据 
  2 点击轮播图 预览大图
    1 给轮播图绑定点击事件
    2 调用小程序的api previewImage
  3 点击 加入购物车
    1 先绑定点击事件
    2 获取缓存中的购物车数据 数组格式
    3 先判断 当前的商品是否已经存在于 购物车
    4 已经存在 修改商品数据 执行购物车数量++ 重新把购物车数组 填充回缓存中
    5 不存在于购物车的数组中 直接给购物车数组添加一个新元素 新元素 带上 购买数量属性 num
    6 弹出提示
  4 商品收藏
    1 
 */
    import {
      request
    } from "../../request/index.js";
    import regeneratorRuntime from '../../lib/runtime/runtime';
    // pages/goods_detail/index.js
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        goodsObj: {},
        // 商品是否被收藏过
        isCollect:false
      },
      // 商品对象, 对象用来保存数据源
      GoodsInfo: {},
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad(options) {
       /*  const { goods_id } = options;
        console.log("goods_id:" + goods_id);
        this.getGoodsDetail(goods_id) */
      },
      /* 
      1 获取商品详情数据
      2 形参和实参都是goods_id
      */
      async getGoodsDetail(goods_id) {
        const goodsObj = await request({ url: "/goods/detail", data: { goods_id } });
        console.log("goodsObj in getGoodsDetail(goods_id)-unmodified:", goodsObj)
        this.GoodsInfo = goodsObj;
        // console.log(goodsObj);
        /* this.setData({
          goodsObj : res
        }) */
        // 1 获取缓存中的商品收藏数组
        let collect = wx.getStorageSync("collect") || [];
        // 2 判断当前商品是否被收藏
        let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);
        this.setData({
          // 定向获取数据源下面的数据
          goodsObj: {
            goods_name: goodsObj.goods_name,
            goods_price: goodsObj.goods_price,
            // iphone部分手机 不识别 webp图片格式
            // 最好找到后台 让他进行修改
            // 临时自己改 确保后台存在 1.webp => 1.jpg
            goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),
            pics: goodsObj.pics,
          },
          isCollect
        })
        console.log("this.data.goodsObj(restructured):", this.data.goodsObj)
      },
      /* 
      1 点击轮播图 放大预览
      2 点击任一轮播图后, 都会跳转这个方法
      */
      handlePreviewImage(e) {
        console.log('%c' + '预览', "color:red;font-size:100px;background-image:linear-gradient(to left,#0094ff,pink)")
        console.log("预览")
        console.log('%c 李四', 'color: red; font-size: 14px')
        // 1 先构造要预览的图片数组 (pics数组下面五个元素下面各有一个pics_mid.总共5个图片元素)
        const urls = this.GoodsInfo.pics.map(v => v.pics_mid)
        //  2 接收传递过来的图片url (传参)
        console.log(e)
        const current = e.currentTarget.dataset.url;
        wx.previewImage({
          /* 
          表示点击的谁, 先写固定,点击第一张
          */
          // current: current,
          current,
          // urls: urls
          urls
        });
      },
    
      // 点击 加入购物车
      handleCartAdd() {
        // console.log("shoppingCart")
        /* 
        1 获取缓存中的购物车 数组
        2 最初没有数据?!
        3 控制台里面的storage数据
        4 wx.getStorageSync("cart")||[] 有数据源就不是false而是true,不会选[]/false
        5 可以构建多个cart数组
        */
        let cart = wx.getStorageSync("cart") || [];
        // 实际第一次打印出来了||或许就是storage里面的数字 (self-created theory)
        console.log("cart1:", cart)
        // console.log("cart2:"+cart)
        // 2 判断 商品对象是否存在于购物车数组中 拿到索引
        console.log("this.GoodsInfo", this.GoodsInfo)
        console.log("this.GoodsInfo.goods_id", this.GoodsInfo.goods_id)
        // 1)找到就是cart数组下面元素的下标值, 2)没找到就返回-1
        let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id)
        console.log("index:" + index)
        if (index === -1) {
          // 3 不存在 第一次添加
          this.GoodsInfo.num = 1;
          cart.push(this.GoodsInfo);
        } else {
          // 4 已经存在购物车数据 执行 num++
          cart[index].num++;
        }
        console.log("cart:", cart)
        /* 5 把购物车添加回缓存中
             5.1 举例：wx.setStorageSync('key', 'value') 向本地存储中写入内容
        */
        wx.setStorageSync("cart", cart)
        // 6 弹框/窗提示
        wx.showToast({
          title: '加入成功',
          icon: 'success',
          // duration默认事件1.5秒钟
          /* image: '',
          duration: 1500, */
          // true 防止用户 手抖 疯狂点击按钮 避免反复加入购物车
          mask: true,
        });
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady() {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        let pages = getCurrentPages();
        let currentPage = pages[pages.length - 1];
        let options = currentPage.options;
    
        const { goods_id } = options;
        console.log("goods_id:" + goods_id);
        this.getGoodsDetail(goods_id)
    
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide() {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload() {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh() {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom() {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage() {
    
      }
    })